<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.pricePreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="pricePreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.typePreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="typePreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.hddPreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="hddPreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.cpuPreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="cpuPreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.memoryPreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="memoryPreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3 class="h3-pama0">{{$t('newSearchResult.ProductPreference.panelPreference')}}</h3>
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="panelPreference" style="width: 100%; height:30vh;" v-loading=""></div>
          <!--以上是日提示框内容-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from "../../../../utils/auth";

  export default {
    props: [
      'bus',
      'countrys',
      'fisyears',
      'geos',
      'regions',
      'show'
    ],
    data() {
      return {
        DomCharts: {
          pricePreference: '',
          typePreference: '',
          hddPreference: '',
          cpuPreference: '',
          memoryPreference: '',
          panelPreference: ''
        },
        chartsData: {
          CPU_Series: '',
          HDD: '',
          Memory: '',
          Panel_Size: ''
        },
        errorInfo: {
//          color: '#fff',
//          text: 'NO DATA',
//          textColor: "#000",
//          maskColor: '#fff'
          text: 'No Data',
          color: '#fff',
          textColor: '#959595',
          maskColor: 'rgb(255, 255, 255)',
          zlevel: 0
        },
        // postData: {
        //   geos: this.geos,
        //   regions: this.regions,
        //   countrys: this.countrys,
        //   fisyears: this.fisyears,
        //   bus: this.bus,
        //   flag: '',
        //   search_value: '',
        //   tablename: '',
        //   username: getUsername()
        // },
        loading: {}
      }
    },
    computed: {
      ...mapGetters([
        'sidebar'
      ]),
      postData() {
        return {
          geos: this.geos,
          regions: this.regions,
          countrys: this.countrys,
          fisyears: this.fisyears,
          bus: this.bus,
          flag: this.$route.query.result_flag,
          search_value: this.$route.query.search_value,
          tablename: 'machine',
          username: getUsername()
        }
      }
    },
    methods: {
      initEchartsDom() {
        this.DomCharts.pricePreference = this.echarts.init(document.getElementById('pricePreference'), null, {renderer: 'canvas'})
        this.DomCharts.typePreference = this.echarts.init(document.getElementById('typePreference'), null, {renderer: 'canvas'})
        this.DomCharts.hddPreference = this.echarts.init(document.getElementById('hddPreference'), null, {renderer: 'canvas'})
        this.DomCharts.cpuPreference = this.echarts.init(document.getElementById('cpuPreference'), null, {renderer: 'canvas'})
        this.DomCharts.memoryPreference = this.echarts.init(document.getElementById('memoryPreference'), null, {renderer: 'canvas'})
        this.DomCharts.panelPreference = this.echarts.init(document.getElementById('panelPreference'), null, {renderer: 'canvas'})
      },
      async initPriceChart(params) {
        const _this = this
        try {
          // this.loading.Echart3 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await
            this.axios.post('/proPreference/productPricePreference.do', params)
          if (res.data.data.name.length !== 0) {
            let gpData = res.data.data
            let xAxisData = gpData.name
            let legendData = []
            let gpLine = gpData.lin.value
            let gpLineData = []
            let colorStops = []

            for (let i in gpLine) {
              legendData.push({name: gpLine[i].name, icon: 'circle'})
              gpLineData.push({
                name: gpLine[i].name,
                data: gpLine[i].value,
                type: 'line',
                // stack: i,
                smooth: true,
                smoothMonotone: 'none',
                lineStyle: {
                  normal: {
                    width: 2,
                    // shadowColor: this.ChartColor[k],
                    // opactity: 0.5,
                    // shadowBlur: 12,
                    // shadowOffsetX: 0,
                    // shadowOffsetY: 5
                  }
                }
              })
            }

            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + comdify(params[i].value.toString()) + '<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 8,
                itemHeight: 12,
                data: legendData
              },
              grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                // min: '-10',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  // formatter: '{value}%'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f9']
                  }
                }
              },
              series: gpLineData
            }
            this.DomCharts.pricePreference.clear()
            this.DomCharts.pricePreference.setOption(option)
            this.DomCharts.pricePreference.hideLoading()

          } else {
            this.DomCharts.pricePreference.clear()
            this.DomCharts.pricePreference.hideLoading()
             this.DomCharts.pricePreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.DomCharts.pricePreference.hideLoading()

          this.DomCharts.pricePreference.clear()
          this.DomCharts.pricePreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart3 = false
      },
      async initTypeChart(params) {
        const _this = this
        try {
          // this.loading.Echart3 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          let res = await
            this.axios.post('/proPreference/finalBuPreference.do', params)
          if (res.data.data.name.length !== 0) {
            let gpData = res.data.data
            let xAxisData = gpData.name
            let legendData = []
            let gpLine = gpData.lin.value
            let gpLineData = []
            let colorStops = []

            for (let i in gpLine) {
              legendData.push({name: gpLine[i].name, icon: 'circle'})
              gpLineData.push({
                name: gpLine[i].name,
                data: gpLine[i].value,
                type: 'line',
                // stack: i,
                smooth: true,
                smoothMonotone: 'none',
                lineStyle: {
                  normal: {
                    width: 2,
                    // shadowColor: this.ChartColor[k],
                    // opactity: 0.5,
                    // shadowBlur: 12,
                    // shadowOffsetX: 0,
                    // shadowOffsetY: 5
                  }
                }
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + comdify(params[i].value.toString()) + '<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 8,
                itemHeight: 12,
                data: legendData
              },
              grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  rotate: 45,
                  interval: 0,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                // min: '-10',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 9,
                  color: '#959eaf',
                  // formatter: '{value}%'
                },
                splitLine: {
                  lineStyle: {
                    color: ['#f5f5f9']
                  }
                }
              },
              series: gpLineData
            }
            this.DomCharts.typePreference.clear()
            this.DomCharts.typePreference.setOption(option)
            this.DomCharts.typePreference.hideLoading()

          } else {
            this.DomCharts.typePreference.clear()
            this.DomCharts.typePreference.hideLoading()
             this.DomCharts.typePreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.DomCharts.typePreference.clear()
           this.DomCharts.typePreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart3 = false
      },
      async initProConfigPreferencesData(params) {
        let res = await this.axios.post('/proPreference/proConfigPreferences.do', params)
        let data = res.data.data
        this.chartsData.CPU_Series = data.CPU_Series
        this.chartsData.HDD = data.HDD
        this.chartsData.Memory = data.Memory
        this.chartsData.Panel_Size = data.Panel_Size
        this.initHDDChart(data.HDD)
        this.initCPUChart(data.CPU_Series)
        this.initMemoryChart(data.Memory)
        this.initPanelChart(data.Panel_Size)
      },
      initHDDChart(data) {
        const _this = this
        try {
          // this.loading.Echart1 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          // let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendQty.do`, params)
          if (data.name.length !== 0) {
            let revMixData = data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value} %',
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.DomCharts.hddPreference.clear()
            this.DomCharts.hddPreference.setOption(option)
          } else {
            this.DomCharts.hddPreference.clear()
            this.DomCharts.hddPreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          this.DomCharts.hddPreference.clear()
          this.DomCharts.hddPreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart1 = false
      },
      initCPUChart(data) {
        const _this = this
        try {
          // this.loading.Echart1 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          // let res = await this.axios.post(`${this.testPort}/loyaltyanalysis/cLoyaltyTrendQty.do`, params)
          if (data.name.length !== 0) {
            let revMixData = data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value} %',
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.DomCharts.cpuPreference.clear()
            this.DomCharts.cpuPreference.setOption(option)
          } else {
            this.DomCharts.cpuPreference.clear()
            this.DomCharts.cpuPreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.DomCharts.cpuPreference.clear()
          this.DomCharts.cpuPreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart1 = false
      },
      async initMemoryChart(data) {
        const _this = this
        try {
          // this.loading.Echart1 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          if (data.name.length !== 0) {
            let revMixData = data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value} %',
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.DomCharts.memoryPreference.clear()
            this.DomCharts.memoryPreference.setOption(option)
          } else {
            this.DomCharts.memoryPreference.clear()
            this.DomCharts.memoryPreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.DomCharts.memoryPreference.clear()
          this.DomCharts.memoryPreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart1 = false
      },
      async initPanelChart(data) {
        const _this = this
        try {
          // this.loading.Echart1 = true
          const colorList = ['#0090e9', '#b6a2de', '#2fc7c9', '#ffb980', '#6be6c1']
          if (data.name.length !== 0) {
            let revMixData = data
            // 暂时只取201601及以后的数据
            let xAxisData = revMixData.name
            let legendData = []
            let barData = revMixData.bar.value
            let revMixBarData = []
            for (let i in barData) {
              legendData.push(barData[i].name)
              revMixBarData.push({
                name: barData[i].name,
                data: barData[i].value,
                type: 'bar',
                barMaxWidth: 20,
                stack: 'sum'
              })
            }
            let option = {
              color: colorList,
              tooltip: {
                confine: true,
                trigger: 'axis',
                formatter: function (params) {
                  let item = params[0].name + '<br/>'
                  for (let i in params) {
                    item += params[i].seriesName + ': ' + params[i].value + '%<br />'
                  }
                  return item
                },
                axisPointer: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4'
                },
                extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
              },
              legend: {
                itemWidth: 10,
                itemHeight: 10,
                data: legendData
              },
              grid: {
                left: '3%',
                right: 0,
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLabel: {
                  rotate: 45,
                  fontSize: 9,
                  color: '#959eaf'
                },
                data: xAxisData
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: '#f5f5f9'
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  formatter: '{value} %',
                  fontSize: 9,
                  color: '#959eaf'
                }
              },
              series: revMixBarData
            }
            this.DomCharts.panelPreference.clear()
            this.DomCharts.panelPreference.setOption(option)
          } else {
            this.DomCharts.panelPreference.clear()
            this.DomCharts.panelPreference.showLoading('default', _this.errorInfo)
          }
        } catch (error) {
          console.log(error)
          this.DomCharts.panelPreference.clear()
          this.DomCharts.panelPreference.showLoading('default', _this.errorInfo)
        }
        // this.loading.Echart1 = false
      },
      chartsResize() {
        const _this = this
        // alert(111)
        setTimeout(function () {
          _this.DomCharts.pricePreference.resize()
          _this.DomCharts.typePreference.resize()
          _this.DomCharts.hddPreference.resize()
          _this.DomCharts.cpuPreference.resize()
          _this.DomCharts.memoryPreference.resize()
          _this.DomCharts.panelPreference.resize()
        }, 200)
      },
      loadCharts() {
        this.initPriceChart(this.postData)
        this.initTypeChart(this.postData)
        this.initProConfigPreferencesData(this.postData)
      }
    },
    watch: {
      // 'sidebar.opened': function () {
      //   this.chartsResize()
      // },
      // show() {
      //   this.chartsResize()
      // }
    },
    mounted() {
      const _this = this
      this.initEchartsDom()
      this.loadCharts() //父组件调用了
      // window.onresize = function () {
      //   alert(22)
      //   _this.chartsResize()
      // }
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {
      return s1.replace(re, "$&,") + s2
    })
    return n1
  }
</script>
<style scoped lang="scss">
  .h3-pama0 {
    margin: 0 0 20px 10px;
    padding: 0;
    /*font-size: 18px;*/
    font: bold 16px;
    color: #666;
  }
</style>
